<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            width: 100%;
        }

        .wrapper {
            width: 1000px;
            margin: 0px auto;
        }

        table {
            border-collapse: collapse;
            margin: 50px auto;
        }

        td {
            width: 200px;
            height: 20px;
            line-height: 20px;
            text-align: center;
        }

        th {
            width: 200px;
            height: 20px;
            line-height: 20px;
            text-align: center;
        }

        .info input[type="text"] {
            width: 100px;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div class="wrapper" style="width: 1000px;">
        <div class="info">学号:<input type="text">姓名:<input type="text">性别:<input type="text">年龄:<input
                type="text">专业:<input type="text"><button onclick="add()">确定</button></div>
        <table border="1px solid black">
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>专业</th>
                <th>操作</th>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>

        </table>
    </div>

    <script>
        var table = document.querySelector("table").children[0]
        var row = 1
        function add() {
            var info = document.querySelectorAll(".info>input[type='text']")
            if (test(info)) {
                if (row < 5) {
                    var tr = table.children[row]
                    row++
                    var tds = tr.children
                    for (var i = 0; i < tds.length; i++) {
                        if (i == 5) {
                            tds[i].innerHTML = "<button onclick = del(this)>删除</button>"
                        }
                        else
                            tds[i].innerText = info[i].value
                    }
                }
                else
                    more(info)
                clear(info)
            }

        }
        function test(info) {
            for (i = 0; i < info.length; i++) {
                if (info[i].value == "") {
                    alert("请填写完整信息!")
                    return false
                }
            }
            return true
        }
        function more(info) {
            var tr = document.createElement("tr")
            for (i = 0; i < info.length + 1; i++) {
                var td = document.createElement("td")
                if (i == 5) {
                    td.innerHTML = "<button onclick = del(this)>删除</button>"
                }
                else td.innerText = info[i].value
                tr.appendChild(td)
            }
            table.appendChild(tr)
        }
        function clear(info) {
            for (var i = 0; i < info.length; i++) {
                info[i].value = ""
            }
        }
        function del(obj) {
            // obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode)//使用removeChild移出该节点的指定子节点
            obj.parentNode.parentNode.remove()//使用remove直接移出该节点
            if (row > 5) {
                row--
            }
        }
    </script>
</body>

</html>